<template>
  <div class="tool-echart-line">
    <eharts-option :config="config" :option="option" :key="key"></eharts-option>
  </div>
</template>

<script>
import mixins from "../mixin";
export default {
  name: "tool-echart-line",
  mixins: [mixins],
  computed: {
    option() {
      const gridData = this.tableData;
      const series = [];
      gridData.yData.forEach((item, index) => {
        const valueData = [];
        try {
          gridData.valueData[index].forEach((em) => {
            valueData.push(em);
          });
        } catch (e) {
          //TODO handle the exception
        }
        const data = {
          name: item.name ? item.name : item,
          // barWidth: this.attr.barWidth, //固定柱子宽度
          smooth: this.attr.isSmooth,
          data: valueData,
          type: "line",
          label: {
            show: this.attr.labelShow,
            color: this.attr.labelColor,
            position: "top", //在上方显示
            fontSize: this.attr.lableSize,
          },
          areaStyle: {
            //区域面积颜色设置
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "transparent" // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: this.attr.regionColor
                    ? this.attr.colorGroup[index]
                    : "transparent", // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
        };
        series.push(data);
      });
      return {
        color: this.attr.colorGroup,
        // 自定义标题
        title: {
          show: this.attr.titleShow,
          text: this.attr.title,
          textStyle: {
            color: this.attr.titleColor,
            fontWeight: this.attr.titleWeight,
            fontSize: this.attr.titleSize,
          },
          subtext: this.attr.subTitle, // 副标题
          subtextStyle: {
            color: this.attr.titleColor,
            fontWeight: this.attr.titleWeight,
            fontSize: this.attr.subTitleSize,
          },
          padding: [16, 16],
          itemGap: 10, //主副标题之间的间距
          left: "left", // 100、'left'、'right'、'center'
        },
        //图例
        legend: {
          padding: 16,
          show: this.attr.legendShow,
          textStyle: {
            color: this.attr.legendColor,
            fontWeight: this.attr.legendWeight,
            fontSize: this.attr.legendSize,
          },
          formatter: function (name) {
            return name;
          },
          right: this.attr.legendRight,
          top: this.attr.legendTop,
          orient: "horizontal", // 'horizontal'、'vertical'
          icon: "roundRect", // 'circle', 'rect', 'roundRect'
          itemHeight: 16,
        },
        tooltip: {
          show: false,
          trigger: "item",
          appendToBody: true,
          formatter: "{a}<br />{b}: {c}kg",
          backgroundColor: "rgba(50,50,50,0.7)",
          borderColor: "rgba(50,50,50,0.7)",
          textStyle: {
            color: "#fff",
            fontSize: 14,
          },
        },
        grid: {
          left: 16,
          right: 16,
          top: 84,
          bottom: 16,
          containLabel: true,
        },
        xAxis: {
          name: "月份",
          nameTextStyle: {
            fontSize: this.attr.axisSize,
          },
          type: "category",
          data: gridData.xData,
          axisLine: {
            show: true,
            lineStyle: {
              color: "#eee",
              width: 1,
              type: "solid",
            },
          },
          axisLabel: {
            show: true,
            interval: "auto",
            // color: function (value, index) {
            //   return "#000";
            // },
            color: this.attr.axisColor,
            fontSize: this.attr.axisSize,
            rotate: this.attr.rotateX, //选择角度
            formatter: function (value, index) {
              return value;
            },
          },
        },
        yAxis: {
          name: null,
          nameTextStyle: {
            color: "#000",
            fontSize: this.attr.axisSize,
          },
          nameRotate: 0,
          type: "value",
          axisLine: {
            show: false,
            lineStyle: {
              color: "#ddd",
              width: 1,
              type: "solid",
            },
          },
          axisLabel: {
            show: true,
            interval: "auto",
            color: this.attr.axisColor,
            fontSize: this.attr.axisSize,
            rotate: this.attr.rotateY, //选择角度
          },
          min: function (value) {
            return 0;
          },
          max: function (value) {
            return value.max * 1.5;
          },
          triggerEvent: false,
        },
        series: series,
      };
    },
  },
  data() {
    return {
      key: Date.parse(new Date()),
      tableData: {
        xData: [],
        yData: [],
        valueData: [],
      },
      attr: {
        //主题
        colorGroup: [
          "#01def6",
          "#cccccc",
          "#FF3333",
          "#37a2da",
          "#32c5e9",
          "#ffdb5c",
        ],
        // 栅格
        span: {
          status: true,
          row: 2,
          column: 1,
        },
        barWidth: 30,
        isSmooth: false,
        regionColor: false,
        // 显示数值
        labelShow: true,
        labelColor: "#000",
        labelSize: 12,
        // 标题
        titleShow: true,
        title: "折线图标题",
        subTitle: "折线图副标题",
        titleColor: "#000",
        titleWeight: 800,
        titleSize: 16,
        subTitleSize: 14,
        // 图例
        legendShow: true,
        legendSize: 12,
        legendColor: "#000",
        legendWeight: 400,
        orient: "horizontal",
        legendTop: 0,
        legendRight: 0,
        // 坐标轴配置
        axisSize: 16,
        axisColor: "#000",
        rotateX: 0,
        rotateY: 0,
      },
    };
  },
  pageData: {
    name: "tool-echart-line",
    title: "折线图",
    count: 0,
    width: 540,
    height: 360,
    config: {
      label: "折线图",
      data: {
        key: "tableData",
        type: "defaulteVal",
        value: {
          xData: ["1月", "2月", "3月", "9月"], // X轴
          yData: [
            {
              name: "数据1",
              type: "bar",
            },
            {
              name: "数据2",
              type: "bar",
            },
          ],
          valueData: [
            [130, 100, 100, 100],
            [120, 100, 110, 100],
          ],
        },
      },
      attr: [
        {
          key: "span",
          title: "栅格布局",
          formType: "layout-span",
          group: "basics",
          type: "Object",
          data: {
            status: true,
            row: 2,
            column: 1,
          },
        },
        {
          key: "colorGroup",
          title: "颜色主题",
          formType: "color-group",
          group: "basics",
          type: "Boolean",
          data: [
            "#01def6",
            "#cccccc",
            "#FF3333",
            "#37a2da",
            "#32c5e9",
            "#ffdb5c",
          ],
        },
        {
          key: "isSmooth",
          title: "折线过渡",
          formType: "changeSwitch",
          group: "basics",
          type: "Boolean",
          data: false,
        },
        {
          key: "regionColor",
          title: "区域填充",
          formType: "radio",
          group: "basics",
          type: "Boolean",
          data: false,
        },
        {
          key: "labelShow",
          title: "显示数值",
          formType: "changeSwitch",
          group: "basics",
          type: "Boolean",
          data: true,
        },
        {
          key: "labelColor",
          title: "数值颜色",
          formType: "color-picker",
          group: "basics",
          type: "Boolean",
          data: "#000",
        },
        {
          key: "titleShow",
          title: "显示标题",
          formType: "radio",
          group: "title",
          type: "Boolean",
          data: true,
        },
        {
          key: "title",
          title: "自定义标题",
          formType: "text-string",
          group: "title",
          type: "String",
          data: "折线图标题",
        },
        {
          key: "subTitle",
          title: "自定义副标题",
          formType: "text-string",
          group: "title",
          type: "String",
          data: "折线图副标题",
        },
        {
          key: "titleColor",
          title: "标题颜色",
          formType: "color-picker",
          group: "title",
          type: "String",
          data: "#000",
        },
        {
          key: "titleWeight",
          title: "标题粗细",
          formType: "weight-select",
          group: "title",
          type: "String",
          data: "normal",
        },
        {
          key: "titleSize",
          title: "标题大小",
          formType: "text-number",
          group: "title",
          type: "Number",
          data: 16,
        },
        {
          key: "subTitleSize",
          title: "副标题大小",
          formType: "text-number",
          group: "title",
          type: "Number",
          data: 14,
        },
        {
          key: "legendShow",
          title: "显示图例",
          formType: "radio",
          group: "legend",
          type: "Boolean",
          data: true,
        },
        {
          key: "legendTop",
          title: "距上",
          formType: "text-number",
          group: "legend",
          type: "Number",
          data: 0,
        },
        {
          key: "legendRight",
          title: "距右",
          formType: "text-number",
          group: "legend",
          type: "Number",
          data: 0,
        },
        {
          key: "legendSize",
          title: "文字大小",
          formType: "text-number",
          group: "legend",
          type: "Number",
          data: 12,
        },
        {
          key: "legendColor",
          title: "文字颜色",
          formType: "color-picker",
          group: "legend",
          type: "String",
          data: "#000",
        },
        {
          key: "axisColor",
          title: "文字颜色",
          formType: "color-picker",
          group: "axis",
          type: "String",
          data: "#000",
        },
        {
          key: "axisSize",
          title: "文字大小",
          formType: "text-number",
          group: "axis",
          type: "Number",
          data: 16,
        },
        {
          key: "rotateX",
          title: "X 轴角度",
          formType: "text-number",
          group: "axis",
          type: "Number",
          data: 0,
        },
        {
          key: "rotateY",
          title: "Y 轴角度",
          formType: "text-number",
          group: "axis",
          type: "Number",
          data: 0,
        },
      ],
    },
  },
};
</script>

<style scoped lang="scss">
.tool-echart-line {
  width: 100%;
  height: 100%;
  // border: 1px solid #ddd;
  // background-color: #fff;
}
</style>
